---
title: <media-play-button>
description: Media Play Button
layout: ../../../../layouts/ComponentLayout.astro
source: https://github.com/muxinc/media-chrome/tree/main/src/js/media-play-button.js
---

import SandpackContainer from "../../../../components/SandpackContainer.astro";

The `<media-play-button>` component is used to toggle playback of the media content.

The contents of the `<media-play-button>` will update when the media playback state changes.
- When the media is playing, the component will display the contents of its `pause` slot.
- When the media is paused, the component will display the contents of its `play` slot.

## Default usage

<SandpackContainer
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-play-button></media-play-button>
</media-controller>`}
/>

## Customize icons

You can modify the contents of the `<media-play-button>` component using slots. This is useful if you'd like to use your own custom icons instead of the default ones provided by media-chrome.

Here's an example of how you can replace the default play and pause icons with the literal words "Play" and "Pause":  

<SandpackContainer
  editorHeight={270}
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-play-button>
    <span slot="play">Play</span>
    <span slot="pause">Pause</span>
  </media-play-button>
</media-controller>`}
/>

Alternatively, if you would like to represent both states using a single element you could use the `icon` slot instead. This is useful for creating an animated icon that transitions between states. Here's a basic example that uses CSS to change an element based on the play state.

<SandpackContainer
  height={365}
  active="css"
  html={`<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-play-button>
    <span class="my-icon" slot="icon">
      <span>Play</span>
      <span>Pause</span>
    </span>
  </media-play-button>
</media-controller>`}
css={`.my-icon {
  font-weight: bold;
  transition: color .4s;
}

media-play-button:not([mediapaused]) .my-icon span:first-child,
media-play-button[mediapaused] .my-icon span:last-child {
  display: none;
}

media-play-button:not([mediapaused]) .my-icon {
  color: coral;
}
`}
/>

## Styling with attributes

The `<media-play-button>` does not expose any configuration attributes.  
However, it will be updated with **media state** attributes any time 
your media playback state changes.

You can use these attributes to apply custom styles to 
your `<media-play-button>` element under different state conditions:

```css
media-play-button[media-paused] {
  animation: glow 2s;
}
```
